<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WebAPI 考试</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>出货单</h1>
    <div class="row">
      <div class="col">
        <div class="form-inline">
          <button class="btn btn-secondary mr-2" id="selected">
            全选 / 反选
          </button>
          <button class="btn btn-danger mr-2" id="deleteAll">
            删除选中项
          </button>
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon3">订单号</span>
            </div>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" />
            <div class="input-group-append">
              <button class="btn btn-primary" id="tianjia">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <table class="table mt-3">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">订单号</th>
              <th scope="col">日期时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody id="con">
            <tr>
              <th scope="row"><input type="checkbox" checked /></th>
              <td>TM0230478296348243</td>
              <td>2020.6.14</td>
              <td>
                <button type="button" class="btn btn-primary btn-sm">
                  置顶
                </button>
                <button type="button" class="btn btn-danger btn-sm">
                  删除
                </button>
              </td>
            </tr>
            <tr>
              <th scope="row"><input type="checkbox" checked /></th>
              <td>JD054646548243</td>
              <td>2020.6.14</td>
              <td>
                <button type="button" class="btn btn-primary btn-sm">
                  置顶
                </button>
                <button type="button" class="btn btn-danger btn-sm">
                  删除
                </button>
              </td>
            </tr>
            <tr>
              <th scope="row"><input type="checkbox" /></th>
              <td>JD054633348243</td>
              <td>2020.6.14</td>
              <td>
                <button type="button" class="btn btn-primary btn-sm">
                  置顶
                </button>
                <button type="button" class="btn btn-danger btn-sm">
                  删除
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script>
    //1.获取元素
    var bas = document.getElementById('basic-url');//输入框
    var tj = document.getElementById('tianjia');//添加
    var con = document.getElementById('con');//tbody
    //2.创建tr的行
    tj.addEventListener('click', function () {
      var tr = document.createElement('tr');
      //2.1 创建结构把填充内容
      tr.innerHTML = `<th scope="row"><input type="checkbox" checked /></th>
                <td>${bas.value.toUpperCase()}</td>
                <td>${getTimer()}</td>
                <td>
                  <button type="button" class="btn btn-primary btn-sm">
                    置顶
                  </button>
                  <button type="button" class="btn btn-danger btn-sm">
                    删除
                  </button>
                </td>`;
      con.insertBefore(tr, con.children[0]);
    })
    //3.全选反选
    selected.addEventListener('click', function () {
      var inp = con.querySelectorAll('input');
      var selected = document.getElementById('selected');
      for (var i = 0; i < inp.length; i++) {
        if (inp[i].checked == false) {
          for (var i = 0; i < inp.length; i++) {
            inp[i].checked = true;
          }
        } else {
          inp[i].checked = false;
        }
      }
    });
    //4.删除项
    var btns = document.getElementById('deleteAll');//选中项删除按钮
    btns.addEventListener('click', function () {
      //4.2 在删除点击后 获取选择框元素
      var inp = con.querySelectorAll('input');
      //4.1 先做一个if判断 确定用户是否要删除 如果确定则执行下面的代码 如果没有确定则直接退出
      if (confirm('是否确定删除选定内容')) {
        for (var i = 0; i < inp.length; i++) {
          if (inp[i].checked == true) {
            con.removeChild(inp[i].parentNode.parentNode);
          }
        }
      }
    })


    // 5.置顶单项按钮
    //5.1 封装一个函数将置顶事件放入反复调用
    function zhiding1() {
      var zhidin = document.querySelectorAll('.btn-primary.btn-sm');
      for (var i = 0; i < zhidin.length; i++) {
        zhidin[i].addEventListener('click', function () {
          for (var i = 0; i < zhidin.length; i++) {
            con.insertBefore(this.parentNode.parentNode, con.children[0]);
          }
        })
      }
    }
    zhiding1()
    tj.addEventListener('click', zhiding1);


    //6.删除单项按钮
    function sc() {
      var shanchu = document.querySelectorAll('.btn-danger.btn-sm');
      for (var i = 0; i < shanchu.length; i++) {
        shanchu[i].addEventListener('click', function () {
          for (var i = 0; i < shanchu.length; i++) {
            con.removeChild(this.parentNode.parentNode);
          }
        })
      }
    }
    sc();
    tj.addEventListener('click', sc);
    //7.生成当前时间
    //获取当前年月日
    function getTimer() {
      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var datee = date.getDate();
      return year + '.' + month + '.' + datee;
    }
  </script>
</body>

</html>